<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mapbox {margin:0 auto;width: 1200px;height: 600px;}
        .map-container{margin:0 auto;width:1200px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BxrwrB4uXkOldFIax0h3mg43ap9kH5Wz"></script>

</head>
<body>
    <div class="map-container">
        <span>起点</span><input type="text" id="currentposition" >
        <span>终点</span><input type="text" id="destposition" >
        <span id="btn">查找</span>
        <div id="mapbox"></div>        
    </div>
    <script>
        // var map = new BMap.Map('mapbox');
        // var point = new BMap.Point(116.404, 39.915);
        // map.centerAndZoom(point, 15);
        
        // var map = new BMap.Map("mapbox");    
        // map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);    
        // var driving = new BMap.DrivingRoute(map, {    
        //  renderOptions: {    
        //    map: map,    
        //    autoViewport: true    
        //  }    
        // });    
        // driving.search("中关村", "天安门");

        var map = new BMap.Map('mapbox'); 
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom("合肥", 14);
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());
  
        var searchbtn = document.getElementById('btn');
        var currentposition = document.getElementById('currentposition');
        var destposition = document.getElementById('destposition');
        searchbtn.onclick = function(){
            console.log('clicked');            
            if(currentposition.value == "" || destposition.value == ""){
                alert('输入不正确，请输入查找位置');
                return;
            }else{
                // var local = new BMap.LocalSearch(map, {
                //     renderOptions:{map: map, autoViewport: true,pageCapacity: 8}
                // });
                var driving = new BMap.DrivingRoute(map, {
                    renderOptions: {
                        map: map,
                        autoViewport: true
                    }
                });
                driving.search(currentposition.value,destposition.value);
                

            }
        };



        // map.addEventListener('click', function(e){
        //     console.log(e.point.lng+'  '+e.point.lat);
        //     var marker = new BMap.Marker(e.point);
        //     map.clearOverlays();
        //     map.addOverlay(marker);
        // });
    </script>
</body>
</html>